<template>
	<view>
		<view @click="handelJump(item)" class="post-item" v-for="(item,index) in list" :key="index">
			<view style="margin: 30rpx;">
				<view class="post-head">
					<view @click.stop="jumpUserHome(item.userId)">
						<u-avatar :src="imageUrl(item.avatar)"></u-avatar>
					</view>
					<view class="post-head-center">
						<view class="user-info">
							<text class="username">{{item.userName}}</text>
							<image v-if="item.roleKey === 'operatorUser'" class="official"
								:src="'/static/aidex/images/official.png'"></image>
							<text class="schol-name">{{item.regionName}}</text>
						</view>
						<view>
							<view v-if="item.roleKey === 'operatorUser'" class="message">地区消息</view>
							<view class="time">{{item.publishTime|getPublishTime}}</view>
						</view>

					</view>
					<view v-if="item.userId!==vuex_user.id" @click.stop="handelAction(item.id,index)" class="more-dot">
						<u-icon name="more-dot-fill" color="#999"></u-icon>
					</view>
				</view>
				<view class="post-txt">
					<view class="title">{{item.title}}</view>
					<rich-text class="content" :nodes="markdownToContent(item.content)"></rich-text>
				</view>

				<!-- 图片类型 -->
				<view v-if="item.image" class="img-wrap">
					<!-- 1张图片时 -->
					<image @click.stop="onPreviewImage(item.image,0)" class="post-img-1" :src="imageUrl(item.image)"
						mode="aspectFill">
					</image>
					<!-- 2张图片时 -->
					<!-- <view class="img-num-2" v-if="item.img_list.length == 2">
						<image class="post-img" @click.stop="onPreviewImage(item.img_list,index2)"
							v-for="(item2,index2) in item.img_list" :key="index2" :src="item2" mode="aspectFill"></image>
					</view> -->
					<!-- 3张图片以上时 -->
					<!-- <view class="img-num-3" v-if="item.img_list.length > 2">
						<image class="post-img" @click.stop="onPreviewImage(item.img_list,index2)"
							v-for="(item2,index2) in item.img_list" :key="index2" :src="item2" mode="aspectFill"></image>
					</view> -->
				</view>

				<!-- 视频类型 -->
				<!-- 				<view class="video-wrap" v-if="item.type == 2">
					<image class="icon" src="/static/play.png"></image>
					<image class="cover-img" mode="aspectFill"
						:src="item.video_src + '?x-oss-process=video/snapshot,t_0,f_jpg'"></image>
				</view> -->
				<view class="footer">
					<view>
						<u-tag :text="item.sectionName" style="color: black;" border-color="#e1e1e1" bg-color="#e1e1e1"
							mode="plain"></u-tag>
					</view>
					<view class="num-wrap">
						<view class="num-item">
							<u-icon name="eye"></u-icon>
							<text class="num">{{item.viewNumber}}</text>
						</view>
						<view class="num-item" @click.stop="likePost(index)" :style="item.isLike ?'color:#00aaff':'color:#9a9a9a'">
							<u-icon :name="item.isLike ?'thumb-up-fill':'thumb-up'"></u-icon>
							<text class="num">{{item.likeNumber}}</text>
						</view>
						<view class="num-item">
							<u-icon name="chat"></u-icon>
							<text class="num">{{item.replyNumber}}</text>
						</view>
						<view class="num-item">
							<u-icon name="star"></u-icon>
							<text class="num">{{item.collectNumber}}</text>
						</view>
					</view>
				</view>
			</view>

			<u-gap v-if="list.length!==index+1" height="10" bg-color="#f5f5f5"></u-gap>
		</view>

	</view>
</template>

<script>
	import {
		marked
	} from 'marked'
	export default {
		name: "post-list",
		props: {
			list: {
				type: Array
			}
		},
		data() {
			return {
				chooseIndex: null,
				choosePostId: null,
			};
		},
		filters: {
			getPublishTime(dateString) {
				return uni.$u.timeFrom(new Date(dateString), false)
			},
		},
		methods: {
			likePost(index) {
				let userLike = {
					itemId: this.list[index].id
				}
				this.$u.api.postData.likePost(userLike).then(res => {
					if (res.data) {
						this.list[index].isLike = !this.list[index].isLike
						if (this.list[index].isLike == true) {
							this.list[index].likeNumber++
						} else {
							this.list[index].likeNumber--
						}
					}

				})
			},
			markdownToContent(markdown) {
				return marked(markdown)
			},
			imageUrl(itemUrl) {
				return this.handleUrl(itemUrl)
			},
			handelAction(id, index) {
				this.choosePostId = id;
				this.chooseIndex = index;
				this.$emit('chooseAction', this.choosePostId)
			},
			handelJump(item) {
				let url;
				url = "/pages/platform/post/post-detail?id=" + item.id
				uni.navigateTo({
					url: url
				})
			},
			onPreviewImage(imgArray, index) {
				const imageList = []
				imageList.push(this.imageUrl(imgArray))
				uni.previewImage({
					current: index,
					urls: imageList
				})
			},
			jumpUserHome(uid) {
				uni.navigateTo({
					url: "/pages/platform/user/user-space?uid=" + uid
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.post-item {



		.post-head {

			display: flex;
			margin-bottom: 20rpx;

			.post-head-center {
				flex: 1;
				margin: 0 20rpx;

				.user-info {
					display: flex;
					align-items: center;

					.username {
						color: #010101;
						font-size: 14px;
						font-weight: 600;
						margin-right: 5px;
					}

					.schol-name {
						font-size: 24rpx;
						color: #999;
					}

					.official {
						width: 14px;
						height: 14px;
						display: inline-block;
						line-height: 1;
						margin-right: 5px;
					}


				}

				.message {
					display: inline-block;
					line-height: 1;
					color: #0055ff;
					font-size: 20rpx;
				}

				.time {
					display: inline-block;
					line-height: 1;
					margin-left: 5px;
					font-size: 20rpx;
					color: #999;
					line-height: 1.8;
				}
			}

			.more-dot {}
		}

		.post-txt {
			line-height: 1.8;
			word-break: break-word;

			.title {
				font-family: '黑体';
				font-size: 14px;
				white-space: nowrap;
				font-weight: 600;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.content {
				max-height: 260rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
			}
		}

		.img-wrap {
			.post-img-1 {
				width: 100%;
				border-radius: 10rpx;
			}

			.img-num-2 {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				grid-gap: 10rpx;

				.post-img {
					width: 100%;
					height: 210rpx;
					border-radius: 10rpx;
				}
			}

			.img-num-3 {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				grid-gap: 10rpx;

				.post-img {
					width: 100%;
					height: 210rpx;
					border-radius: 10rpx;
				}
			}
		}


		.footer {
			display: flex;
			margin: 20rpx 0;



			.num-wrap {
				margin-left: auto;
				display: flex;

				.num-item {
					display: flex;
					align-items: center;
					color: #999;
					margin-left: 20rpx;
					font-size: 14px;

					.num {
						margin-left: 5rpx;
					}
				}
			}
		}
	}

	.video-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		width: 100%;
		height: 500rpx;

		.cover-img {
			width: 100%;
			border-radius: 10rpx;
		}

		.icon {
			width: 100rpx;
			height: 100rpx;
			z-index: 999;
		}

		image {
			position: absolute;
		}
	}
</style>